Skip to content

feat: embeddable calculator widgets with postMessage resize (issue #121) - #170

Closed
yy1142274323 wants to merge 1 commit into
YurMil:mainfrom
yy1142274323:feat/embed-calculators
Closed

yy1142274323 wants to merge 1 commit into
YurMil:mainfrom
yy1142274323:feat/embed-calculators

Conversation

@yy1142274323

Copy link
Copy Markdown

Bounty #121 — Embeddable calculator widgets for external sites

Closes #121

Acceptance criteria

  • Embed build for at least Blind Flange and Dished End calculators
    • New routes: /embed/blind-flange-calculator/ and /embed/pressure-vessel-dished-end-calc/
    • Verified compiled in the production build (build/embed/*/index.html both generated)
  • postMessage-based resize handling; no third-party cookies required
    • EmbedUtilityPage measures the same-origin tool iframe content height, sizes the frame to it, and posts {source: 'cadautoscript-embed', type: 'resize', height, slug} to the embedding parent
    • The embed route sets no cookies and loads no third-party scripts
  • Documentation page with copy-paste snippet
    • docs/utilities/embed-calculators.md rewritten: embed URL table, copy-paste iframe + parent-side resize-listener snippet for both calculators, how-it-works section
  • "Powered by" backlink in the widget footer
    • Slim footer on every embed linking to the full calculator page

Implementation notes

  • New shared component src/components/Utilities/EmbedUtilityPage.tsx (minimal chrome: no navbar/footer, just the tool iframe + powered-by bar)
  • Two thin route files under src/pages/embed/<slug>.tsx (3 lines each, factory pattern — easy to extend to other calculators)
  • Reuses the existing utilityPageConfigs (appPath, title, iframeAllow), so embed behavior stays in sync with the full shell pages
  • Embed pages carry <meta name="robots" content="noindex"> to protect search visibility of the main pages
  • pnpm build passes; embed routes present in the generated static output

Extending to more calculators

import {EmbedUtilityPage} from '@site/src/components/Utilities/EmbedUtilityPage';

export default EmbedUtilityPage('<slug>');

@chatgpt-codex-connector

Copy link
Copy Markdown

Codex usage limits have been reached for code reviews. Please check with the admins of this repo to increase the limits by adding credits.
Credits must be used to enable repository wide code reviews.

@vercel

vercel Bot commented Sep 9, 2026

Copy link
Copy Markdown
Contributor

@yy1142274323 is attempting to deploy a commit to the milieninyv's projects Team on Vercel.

A member of the Team first needs to authorize it.

@yy1142274323

Copy link
Copy Markdown
Author

/claim #121

@opirebot

opirebot Bot commented Sep 9, 2026

Copy link
Copy Markdown

😅 Ups... the issue does not have any reward yet!

@YurMil

YurMil commented Sep 14, 2026

Copy link
Copy Markdown
Owner

Thank you for this, @yy1142274323 — the embed routes, the EmbedUtilityPage factory and the docs rewrite are a solid base.

Your commit is merged into #174 unchanged (3624250, authorship preserved), together with a follow-up for what kept the embeds from working on an external site:

  • Framing was blocked. Every response sends X-Frame-Options: SAMEORIGIN and CSP frame-ancestors 'self' (see vercel.json), so browsers refused to render /embed/* — and the calculator bundle nested inside it — on any other origin. The embed routes and the two app bundles now get their own header rule with frame-ancestors *; this was verified with curl on the Vercel preview.
  • Auto-height stopped after 15 s, and the document height could grow but never shrink. The tool document is now observed with a ResizeObserver for the page's lifetime, and <main> is reported only when it changes.
  • Embed routes are excluded from the sitemap, and the parent snippet checks event.origin and matches event.source.

Closing this PR in favour of #174 so the review happens in one place. Thanks again for the contribution.

@YurMil YurMil closed this Sep 14, 2026
YurMil added a commit that referenced this pull request Sep 14, 2026
Embeddable calculator widgets (supersedes #170)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Embeddable calculator widgets for external sites

2 participants